/**
 * Creates the base structure of Ext.form.Panel.
 * @member Ext.form.Panel
 */
@mixin extjs-form {
  /*misc*/
  .#{$prefix}webkit {
    * {
      &:focus {
        outline: none !important;
      }
    }
  }

  // form items
  .#{$prefix}form-item {
    vertical-align: top;
    table-layout: fixed;
  }

  // form items within auto, anchor, vbox checkboxgroup, and table layouts have bottom margin of 5px
  .#{$prefix}autocontainer-form-item,
  .#{$prefix}anchor-form-item,
  .#{$prefix}vbox-form-item,
  .#{$prefix}checkboxgroup-form-item,
  .#{$prefix}table-form-item {
    margin-bottom: 5px;
  }

  // form items within form layout have 5px margin around them
  .#{$prefix}form-layout-table {
    border-collapse: separate;
    border-spacing: 0 2px;
  }

  // Allow for positioned child elements, e.g. custom icons
  .#{$prefix}form-item-body {
    position: relative;
  }

  .#{$prefix}form-form-item {
    td {
      border-top: 1px solid transparent;
    }
  }

  // IE6 cannot do border-spacing 0 2px;
  // IE6 cannot do border-color: transparent
  // So we revert pack to a pad row for IE6
  .#{$prefix}ie6 {
    .#{$prefix}form-layout-table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    .#{$prefix}form-form-item {
      td {
        border-top-width: 0;
      }
    }

    // Padding row for IE6 when Labelable Fields are in a form layout
    td.#{$prefix}form-item-pad {
      height: 5px;
    }
  }

  // No padding when inside an Editor
  .#{$prefix}editor .#{$prefix}form-item-body {
    padding-bottom: 0;
  }

  .#{$prefix}form-item-label {
    display: block;
    padding: 3px 0 0;
    font-size: $form-label-font-size;
    @include no-select;
  }

  .#{$prefix}form-item-label-top {
    display: block;
    zoom: 1;
    padding: 0 0 5px 0;
  }

  .#{$prefix}form-item-label-right {
    text-align: right;
  }

  .#{$prefix}form-invalid-under {
    padding: 2px 2px 2px $form-error-icon-width;

    color: $form-error-msg-color;
    font: $form-error-msg-font;
    line-height: $form-error-msg-line-height;

    background: no-repeat 0 2px;
    background-image: theme-background-image($theme-name, $form-exclamation-icon);
  }

  .#{$prefix}form-invalid-icon {
    width: $form-error-icon-width;
    height: 14px;
    background: no-repeat center center;
    background-image: theme-background-image($theme-name, $form-exclamation-icon);
    overflow: hidden;

    ul {
      display: block;
      width: $form-error-icon-width;

      li {
        /* prevent inner elements from interfering with QuickTip hovering */
        display: none;
      }
    }
  }

  // When the label is on top, the right icon cell is taller, so the icon image needs bumping down
  .#{$prefix}lbl-top-err-icon {
    margin-bottom: 4px;
  }
}